<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../src/josh-ui.css">
    <title>JoshUi-加载提示组件</title>
</head>
<body>
    <div class="ju-content">
        <!-- 页面加载提示 -->
        <h1 class="ju-panel-title">页面加载提示组件</h1>
        <div class="ju-panel-body">
            <div class="ju-loading">
                <i class="fa fa-circle-o-notch fa-spin ju-loading-icon"></i>
                <span class="ju-loading-info">用力加载中...</span>
            </div>
            <div class="ju-loading">
                <i class="fa fa-refresh ju-loading-icon"></i>
                <span class="ju-loading-info">加载出错，点我重新加载</span>
            </div>
        </div>

        <!-- 单行加载提示组件 -->
        <h1 class="ju-panel-title">单行加载提示组件</h1>
        <div class="ju-panel-body">
            <div class="ju-loading-inline">
                <span class="ju-loading-info">
                    <i class="fa fa-circle-o-notch fa-spin ju-loading-icon"></i>
                    用力加载中
                </span>
            </div>
            <!-- 上下振动效果 -->
            <div class="ju-loading-inline">
                <span class="ju-loading-info">
                    上拉加载更多
                    <i class="fa fa-long-arrow-up fa-vibrate-y ju-loading-icon"></i>
                </span>
            </div>
            <!-- 无图标提示 -->
            <div class="ju-loading-inline">
                <span class="ju-loading-info">
                    我可是有底线的
                </span>
            </div>
            <!-- 无文本提示 -->
            <div class="ju-loading-inline">
                <span class="ju-loading-info">
                    ·
                </span>
            </div>
        </div>
    </div>
</body>
</html>